<!--  -->
<template>
    <view class="dy">
        <view class="dy_select" @click="showPicker">
            {{ title }} <image src="/static/jiantou.png" class="jiantou" />
        </view>
        <view class="dy_charts">
            <view class="dy_title">
                <view>是否开启实时数据</view>
                <u-switch v-model="switchValue"></u-switch>
            </view>
            <view class="charts-box">
                <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
            </view>
        </view>

        <view class="parent-container">
            <view class="tab-container">
                <view class="tabs">
                    <view
                        v-for="(item, index) in tabs"
                        :key="index"
                        class="tab-item"
                        :class="{ active: currentTab === index }"
                        @click="switchTab(index)"
                    >
                        {{ item }}
                    </view>
                </view>
            </view>
            <view class="content">
                <view v-show="currentTab === 0">
                    <view class="dy_container">
                        <view class="dy_item" v-for="(item, idx) in xt_c_list">
                            <view class="dy_item_name">{{ item.name }}</view>
                            <view style="display: flex; justify-content: space-between">
                                <view>
                                    <view class="dy_item_data">{{ item.data }}</view>
                                    <image
                                        class="shuangjiantou"
                                        src="/static/shuangjiantou.png"
                                    />
                                </view>
                                <image
                                    class="dy_icon"
                                    v-if="idx == 0"
                                    src="/static/dy_icon_1.png"
                                />
                                <image
                                    class="dy_icon"
                                    v-if="idx != 0"
                                    src="/static/dy_icon_2.png"
                                />
                            </view>
                        </view>
                    </view>
                </view>
                <view v-show="currentTab === 1">
                    <view class="dy_container">
                        <view class="dy_item" v-for="item in kzyLiwt">
                            <view
                                class="dy_item_title"
                                style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                "
                            >
                                <view class="dy_item_name"> {{ item.name }}</view>
                                <u-switch v-model="item.value"></u-switch>
                            </view>
                            <image class="kzq_icon" src="/static/kzq_icon.png" />
                        </view>
                    </view>
                </view>
                <view v-show="currentTab === 2">
                    <view v-for="(item, idx) in list" class="dy_sxt">
                        <view class="swiper_item" @click="toVideo">
                            <image :src="item.image" />
                            <view class="swiper_item_button">
                                <view class="play-icon"></view> </view
                        ></view>
                        <view class="dy_sxt_name">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>

        <u-picker
            :show="show"
            :columns="columns"
            keyName="name"
            @close="pickerClose"
            @confirm="confirm"
        ></u-picker>
    </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
  
            kzyLiwt: [
                {
                    name: "水泵",
                    value: true,
                },
                {
                    name: "配肥",
                    value: true,
                },
                {
                    name: "水阀",
                    value: true,
                },
                {
                    name: "灌溉",
                    value: true,
                },
                {
                    name: "农药",
                    value: true,
                },
                {
                    name: "卷帘",
                    value: true,
                },
            ],
            tabs: ["传感器", "控制器", "摄像头"],
            currentTab: 0,

            switchValue: true,

            list: [
                {
                    image: "/static/bn_1.png",
                    name: "测试摄像头",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头1",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头2",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头3",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头5",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头6",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头7",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头8",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头11",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头12",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头13",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头14",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头15",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头16",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头17",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头18",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头21",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头22",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头23",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头24",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头25",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头26",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头27",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头28",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头31",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头32",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头33",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头34",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头35",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头36",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头37",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头38",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头41",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头42",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头43",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头44",
                },
                {
                    image: "/static/bn_1.png",
                    name: "摄像头45",
                },
                {
                    image: "/static/bn_2.png",
                    name: "摄像头46",
                },
                {
                    image: "/static/bn_3.png",
                    name: "摄像头47",
                },
                {
                    image: "/static/bn_4.png",
                    name: "摄像头48",
                },
            ],
            chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                rotate: false,
                rotateLock: false,
                color: ["#1890FF", "#91CB74", "#FAC858"],
                padding: [5, 5, 5, 5],
                dataLabel: true,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "right",
                    lineHeight: 25,
                },
                title: {
                    name: "设备总数(台)",
                    fontSize: 12,
                    color: "#666666",
                },
                subtitle: {
                    name: "100",
                    fontSize: 25,
                    color: "#7cb5ec",
                },
                extra: {
                    ring: {
                        ringWidth: 10,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF",
                    },
                },
            },
            xt_list: [
                {
                    name: "监控系统测试",
                    code: "编号 95",
                    gs_code: "公司编号 77",
                    zkid: "主控ID 1",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "灌溉系统",
                    code: "编号 142",
                    gs_code: "公司编号 17",
                    zkid: "主控ID 2",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "环境监测系统",
                    code: "编号 15",
                    gs_code: "公司编号 23",
                    zkid: "主控ID 3",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "虫情监测系统",
                    code: "编号 42",
                    gs_code: "公司编号 61",
                    zkid: "主控ID 4",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "土壤舆情",
                    code: "编号 41",
                    gs_code: "公司编号 22",
                    zkid: "主控ID 5",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "野生动物监测系统",
                    code: "编号 141",
                    gs_code: "公司编号 212",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "水肥一体化系统",
                    code: "编号 51",
                    gs_code: "公司编号 32",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "舆情系统",
                    code: "编号 63",
                    gs_code: "公司编号 54",
                    zkid: "主控ID 7",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
            ],
            xt_c_list: [
                {
                    name: "土壤湿度",
                    data: "55.4%",
                    p_name: "监控系统测试",
                },
                {
                    name: "电导率",
                    data: "125.0uS/cm",
                    p_name: "监控系统测试",
                },
                {
                    name: "pH值",
                    data: "53.4",
                    p_name: "监控系统测试",
                },
                {
                    name: "氮离子",
                    data: "63.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "磷离子",
                    data: "52.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "钾离子",
                    data: "12.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "盐分",
                    data: "74.0mg/L",
                    p_name: "监控系统测试",
                },
            ],
            title: "",
            show: false,
            columns: [],
        };
    },

    onLoad(options) {
        this.columns = [this.xt_list];
        this.title = this.xt_list[0].name;
        this.getServerData();
    },
    onShow() {
        const params = uni.getStorageSync("tabParams");
        if (params) {
            this.currentTab = params;
            uni.removeStorageSync("tabParams");
        }
    },
    methods: {
        switchTab(index) {
            this.currentTab = index;
        },
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                var num = Math.floor(Math.random() * 100);
                var num2 = Math.floor(Math.random() * 100);
                let res = {
                    series: [
                        {
                            data: [
                                {
                                    name: "运行设备",
                                    value: num,
                                },
                                {
                                    name: "断线设备",
                                    value: num2,
                                },
                                { name: "故障", value: 0 },
                            ],
                        },
                    ],
                };
                this.$set(this.opts.subtitle, "name", num + num2);
                this.chartData = JSON.parse(JSON.stringify(res));
            }, 500);
        },
        pickerClose() {
            this.show = false;
        },
        showPicker() {
            this.show = true;
        },
        confirm(arr) {
            this.title = arr.value[0].name;
            this.getServerData();
            this.show = false;
        },
        toVideo() {
            uni.navigateTo({ url: "/pages/dy/videoDetail" });
        },
    },
};
</script>
<style lang="scss" scoped>
.dy {
    padding: 0 40rpx;
    .dy_cp {
        padding: 0 24rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view {
            color: #333;
            font-size: 30rpx;
            position: relative;
        }
        .cur {
            color: #1296db;
        }
    }
    .dy_title {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24rpx;
        view {
            color: #1296db;
        }
    }
    .dy_icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }
    .dy_select {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24rpx;
        height: 80rpx;
        color: #333;
        font-weight: 700;
        font-size: 32rpx;
        background-color: #fff;
        border-radius: 24rpx;
        margin-top: 40rpx;
        .jiantou {
            width: 28rpx;
            height: 28rpx;
        }
    }
    .charts-box {
        width: 100%;
        height: 300rpx;
    }
    .dy_charts {
        background: #fff;
        padding: 24rpx;
        margin-top: 50rpx;
    }
}

.parent-container {
    margin-top: 50rpx;
    width: 100%;
}

.tab-container {
    width: 100%;
    height: 80rpx;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
}
.dy_container {
    margin-top: 50rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30rpx;
    .dy_item {
        width: calc(50% - 16rpx); /* 减去一半的间隙 */
        /* 其他样式 */
        margin-bottom: 16rpx;
        background: #fff;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
        .dy_item_name {
            font-size: 30rpx;
            font-weight: 700;
        }
        .dy_item_data {
            color: #1296db;
            margin-top: 10rpx;
            font-size: 26rpx;
            font-weight: 700;
        }
        .shuangjiantou {
            width: 40rpx;
            height: 40rpx;
        }
    }
}
.tabs {
    display: flex;
    position: relative;
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #f5f5f5;
}

.tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    transition: color 0.3s;

    &.active {
        color: #007aff;
        font-weight: bold;
    }
}

.slider-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
}

.slider {
    width: 20px;
    height: 100%;
    background-color: #007aff;
    border-radius: 2rpx;
    transform: translateX(calc((100% / 3) * var(--active-index) + (100% / 3 - 20px) / 2));
    transition: transform 0.3s ease;
}
.dy_sxt {
    margin-top: 50rpx;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    box-sizing: border-box;
    position: relative;
    image {
        width: 100%;
        height: 360rpx;
    }
    .dy_sxt_name {
        margin-top: 20rpx;
        font-weight: 700;
        color: #333;
    }
    .swiper_item {
        position: relative;
        .swiper_item_button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100rpx;
            height: 100rpx;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s, background-color 0.3s;
        }

        .play-icon {
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 25px solid #fff;
            margin-left: 5px;
        }
        .swiper_item_info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50rpx;
            background: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 22rpx;
            padding: 0 16rpx;
            box-sizing: border-box;
        }
    }
}
.kzq_icon {
    width: 100%;
    height: 164rpx;
}
</style>
